<#include "/common/_layout.html"/>
<@layout>
	<style>

	</style>
	<div id="app">
		<el-form ref="form" :rules="rules" :model="form" label-width="100px" v-loading="loading">
			<el-row :gutter="20" style="margin-left: 0;margin-right: 0;">
				<el-col :span="8">
					<el-form-item label="商品品牌" prop="goods_brand">
						<el-select v-model="form.goods_brand" placeholder="请选择">
							<el-option v-for="item in brand" :key="item.id" :label="item.brand_name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="商品类型" prop="goods_type">
						<el-select v-model="form.goods_type" placeholder="请选择">
							<el-option v-for="item in type" :key="item.id" :label="item.type_name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="预警值" prop="warning_value">
						<el-input-number v-model="form.warning_value" :precision="0" :step="1" :min="0"></el-input-number>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row :gutter="20" style="margin-left: 0;margin-right: 0;">
				<el-col :span="12">
					<el-form-item label="商品规格" prop="goods_spec">
						<el-input v-model.trim="form.goods_spec"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="商品单价" prop="goods_price">
						<el-input-number v-model="form.goods_price" :precision="2" :step="1" :min="0"></el-input-number>
						<span style="margin-left: 5px;">元</span>
					</el-form-item>
				</el-col>

			</el-row>

			<el-tabs type="card">
				<el-tab-pane label="入库情况">

					<el-row :gutter="20" style="margin-left: 0;margin-right: 0;">
						<el-col :span="12">
							<template v-for="(item, index) in store">
								<template v-if="index % 2 == 0">
									<el-form-item :label="item.name" :prop="'store_' + item.id">
										<el-input-number v-model="form_store[item.id]" :precision="0" :step="1" :min="0"></el-input-number>
										<span style="margin-left: 5px;">个</span>
									</el-form-item>
								</template>
							</template>
						</el-col>

						<el-col :span="12">
							<template v-for="(item, index) in store">
								<template v-if="index % 2 == 1">
									<el-form-item :label="item.name" :prop="'store_' + item.id">
										<el-input-number v-model="form_store[item.id]" :precision="0" :step="1" :min="0"></el-input-number>
										<span style="margin-left: 5px;">个</span>
									</el-form-item>
								</template>
							</template>
						</el-col>

					</el-row>

				</el-tab-pane>
			</el-tabs>

			<el-tabs type="card">
				<el-tab-pane label="配套商品">
					<el-row>
						<el-button type="primary" icon="plus" @click="showSelectedGoods">添加</el-button>
					</el-row>
					<el-table ref="table" :data="tableData" border style="margin-top: 10px;">
						<el-table-column prop="brand_name" label="品牌" align='center' width="250">
						</el-table-column>
						<el-table-column prop="type_name" label="类型" align='center' width="150">
						</el-table-column>
						<el-table-column prop="goods_spec" label="型号" align='center'>
						</el-table-column>
						<el-table-column prop="goods_price" label="单价" align='center' width="120">
						</el-table-column>
						<el-table-column label="数量" align='center' width="250">
							<template scope="scope">
								<el-input-number v-model="pt[scope.row.id]" :min="1"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column label="操作" align='center' align='center' width="150" fixed="right">
							<template scope="scope">
								<el-button size="small" @click="remove(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>

		</el-form>

		<el-row class="lb_form_button">
			<el-button type="primary" @click="submitForm('form')">提交</el-button>
			<el-button type="danger" @click="closeDlalog">关闭</el-button>
		</el-row>
	</div>

	<script type="text/javascript">
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					brand: eval('${brand}'),
					type: eval('${type}'),
					store: eval('${store}'),
					form_store: {},
					pt: {},
					tableData: [],
					form: {
						goods_brand: "",
						goods_type: "",
						goods_spec: "",
						warning_value: "",
						goods_price: 0
					},
					rules: {
						goods_brand: [{
							required: true,
							message: '请输入品牌',
							trigger: 'blur'
						}],
						goods_spec: [{
							required: true,
							message: '请输入规格',
							trigger: 'blur'
						}],
						goods_type: [{
							required: true,
							message: '请输入类型',
							trigger: 'blur'
						}],
						goods_price: [{
							required: true,
							message: '请输入价格',
							trigger: 'blur'
						}]
					},
					loading: false
				}
			},
			methods: $.extend(commonMethods, {
				remove: function(index, row) {
					var _that = this;
					this.tableData.forEach(function(_row, _index) {
						if(row.id == _row.id) {
							_that.tableData.splice(_index, 1);
							return false;
						}
					});
				},
				showSelectedGoods: function() {
					parent._vue.selectGoodsDialog.dialogVisible = true;
					top.selectCallBack = selectCallBack;
				},
				submitForm: function(formName) {
					var params = {};
					$.each(this[formName], function(key, value) {
						params["goods." + key] = value;
					});
					params["goodsStore"] = JSON.stringify(this.form_store);
					for(var i = 0; i < _vue.tableData.length; i++) {
						if(!this.pt[_vue.tableData[i].id]) {
							this.$message({
								message: "请补全配套商品数量",
								type: 'error'
							});
							return;
						}
					}
					params["pt"] = JSON.stringify(this.pt);
					FormUtils.submit(this, formName, "${ctx}/goods/add", params);
				},
				closeDlalog: function() {
					//关闭当前这个iframe的dialog
					parent._vue[window.frameElement.id].dialogVisible = false;
				}
			}),
			mounted: function() {
				var _that = this;
				// 初始化仓库值
				$.each(this.store, function(key, value) {
					_that.form_store[value.id] = 0;
				});

			}
		});

		var selectCallBack = function(multipleSelectionAll) {
			var temp = [];
			for(var j = 0; j < multipleSelectionAll.length; j++) {
				var flag = true;
				for(var i = 0; i < _vue.tableData.length; i++) {
					if(_vue.tableData[i].id == multipleSelectionAll[j].id) {
						flag = false;
						break;
					}
				}
				if(flag) {
					temp.push(multipleSelectionAll[j]);
				}
			}
			_vue.tableData = _vue.tableData.concat(temp);

		}
	</script>
</@layout>